<template>
  <div class="app-container">
       <el-row style="background-color: rgba(255,255,255,0.56)" >
           <!-- 左边树内容 -->
           <el-col :span="4"  class="config_details">
            <el-collapse v-model="activeNames" @change="handleChange" accordion>
                <el-collapse-item  v-for="item in factoryWithShelve" :name="item.data[0]? item.data[0].id:'factory'+item.factoryId" :key="item.factoryId" style="font-size: 60px;">
                  <template slot="title" >
                     <el-tooltip class="item" effect="dark" :content="item.factoryName" placement="top">
                      <div style="width: 30vh;overflow: hidden;;white-space: nowrap; padding-right: 15px;">{{item.factoryName}}</div>
                    </el-tooltip>
                     <!-- <i class="header-icon el-icon-info"></i> -->
                  </template>
                  <ul  :class="index == active ? 'active':''" v-if="item.data[0]"  style="line-height: 40px; padding-left: 35px;text-align: left;  font-size: 13px !important;
                   font-weight: 500;"
                   v-for="(item2,index) in item.data" @click="chooseShelves(item2.id,index)"><li style="text-align: left;" >{{item2.prefix+item2.capacity}}</li></ul>
                </el-collapse-item>
               </el-collapse>
            

                   <pagination
                      v-show="leftPage.total>0"
                      :total="leftPage.total"
                      :page.sync="leftPage.queryParams.pageNo"
                      :limit.sync="leftPage.queryParams.pageSize"
                      :pageSizes="[10]"
                      @pagination="leftPageSearchPage"
                    />

                  </el-col>



             <!-- 右边格子内容 -->
           <el-col :span="19" style="margin-left: 30px;" >
            <el-row>
             <el-form
               ref="form"
              :inline="true"
              :model="formData"
              class="demo-form-inline">


        <el-form-item label="订单号">
        <el-input
          style="width: 250px"
          v-model="formData.orderNo"
          placeholder="请输入订单号"
         />
         </el-form-item>

           <el-form-item label="客户电话">
           <el-input
          style="width: 250px"
          v-model="formData.phone"
          placeholder="请输入客户电话"
         />
         </el-form-item>
          <el-button type="primary" @click="search" :loading="searchLoading">查询</el-button>
          <el-button style="margin-bottom: 20px;" @click="reset">重置</el-button>
      </el-form>
      </el-row>
        <el-row :gutter="15" style="height: 65vh; overflow: auto; padding-bottom: 20px;">

            <el-col  v-for="item in shelvesGridList" :body-style="{ display: 'flex' }" style="margin-top: 15px;min-width: 330px; "  :span="4" :key="item.id" >

            <el-card class="box-card"  :class="item.orderId? 'zhanyongColor':''" >

            <el-row  :gutter="2" class="row-bg" :class="item.orderId? 'zhanyongColor':''" style="font-weight: 800; font-size: 35px;" >
              <el-col :span="12">{{item.showCode}}</el-col>
              <el-col :span="12" >
                 <el-button type="primary" v-if="item.customInfo" @click="releasesGridFn(item)">强制释放货架</el-button>
              </el-col>
            </el-row>
             <div v-if="item.orderId">
              <el-row :gutter="2" class="row-bg">订单编号：{{item.customInfo.orderNo}}</el-row>
            <el-row :gutter="2" class="row-bg" style="margin-top: 10px;"> <el-col>客户姓名：{{item.customInfo.name}} <span style="width: 10px; display: inline-block;"></span> 客户电话：{{item.customInfo.phone}}</el-col></el-row>
            <el-row class="row-bg" style="background-color: #D6FFF1;  margin-top: 10px; "><el-col :span="10"  >衣鞋总数量：{{ item.customInfo.data[0]?  item.customInfo.data[0].count:0}}</el-col> <el-col :span="9" style="margin-left: 2px;">配饰数量：{{ item.customInfo.data[1]?  item.customInfo.data[1].count:0}}</el-col></el-row>
             </div>

             <div class="kongxian" v-if="!item.orderId"><div class="kongxianwenzi">空闲</div></div>
          </el-card>
          </el-col>
        </el-row>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNo"
              :limit.sync="queryParams.pageSize"
              :pageSizes="[24,30]"
              @pagination="searchPage"
            />


     <!-- <el-pagination
     v-show="total>0"
      @size-change="search"
      @current-change="search"
      :current-page.sync="search"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination> -->

           </el-col>


       </el-row>


       <el-dialog
            title="警告"
            :visible.sync="releasesGridVisible"
            width="30%"
            :center="true">
            <span style="color: red; font-size:  20px;">您确认一下物品是否已经全部出库？确定要强制释放货架号为：{{releasesGridItem.showCode}} 吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="releasesGridVisible = false">取 消</el-button>
              <el-button type="primary" @click="releasesGridConfirm">确 认</el-button>
            </span>
          </el-dialog>
  </div>
</template>

<script>
import {
  getFactoryWithShelve
} from "@/api/factory/index";
import {getFactoryShelvesGridList , releasesGrid} from "@/api/factory/factoryshelves/index"
import { codeToText } from "element-china-area-data";
import { active } from "sortablejs";
export default {
  name: "Index",
  data() {
    return {
      activeNames:'1',
      total:0,
      releasesGridItem:{},
      leftPage:{
        total:0,
         queryParams:{
          pageNo:1,
          pageSize:10
         }

      },

      shelvesGridList:[],
      releasesGridVisible:false,
      factoryId:"",
      active:0,
      searchLoading:false,
      factoryWithShelve:[],
      formData:{},
      queryParams: {
        page: 0,
        pageNo:1,
        pageSize: 24,
        total: 0,
        lastNum:0
      },
      list: [],
      codeToText,
    };
  },
  created() {
    this.getListData({
      page: 1,
      limit: 10,
    });
  },
  methods: {
    
    releasesGridFn(item){
      // console.info("释放货架",item)
      this.releasesGridItem=item
      this.releasesGridVisible=true
    },

    releasesGridConfirm(){
       releasesGrid({id:this.releasesGridItem.id}).then(res=>{
        this.reset()
        this.$message.success("操作成功！")
         this.releasesGridVisible=false
       })
    },

    leftPageSearchPage(){
      
      this.getListData();
    


    },

    search(){
       this.queryParams.pageNo=1
       this.my_getFactoryShelvesGridList({
      ... this.formData,
      id:this.factoryId,
      ... this.queryParams

    })

    },

    searchPage(){


       this.my_getFactoryShelvesGridList({
      ... this.formData,
      id:this.factoryId,
      ... this.queryParams

    })

    },

    reset(){
      this.formData={}
   this.my_getFactoryShelvesGridList({
      id:this.factoryId
    })

    },


     my_getFactoryShelvesGridList(item){
      if(!item.id){
        return
      }
      this.shelvesGridList=[]
      if(item.id.startsWith("factory")){
        return
      }
      this.searchLoading=true
      this.factoryId=item.id
      getFactoryShelvesGridList(item).then(res=>{
             this.searchLoading=false
             this.shelvesGridList=res.data.records
             this.total=res.data.total
            //  console.log("获取格子",this.shelvesGridList)
        })


     },


     chooseShelves(id,index){
        this.active=index
        this.my_getFactoryShelvesGridList({id:id})
        // console.info("发起请求吧"+id)

     },



    handleChange(e){
      this.active=0
      this.factoryId=e
      this.my_getFactoryShelvesGridList({
        ... this.formData,
      id:this.factoryId,
      ... this.queryParams
      })
        // console.info(e)

    },
    getListData() {
        getFactoryWithShelve({status:"NORMAL",... this.leftPage.queryParams}).then(res=>{
          this.factoryWithShelve=res.data.records
          this.leftPage.total=res.data.total
          this.leftPage.queryParams.pageNo=res.data.current
          this.leftPage.queryParams.pageSize=res.data.size
          // console.info(this.leftPage)

        //         this.list = data.records;
        // this.queryParams.total = data.total;
        // this.queryParams.page = data.current;
        // this.queryParams.limit = data.size;

          //  this.leftPageSearchPage.total=res.data.total
          //   this.leftPageSearchPage.total=res.data.total

          // console.info(this.factoryWithShelve)
        })
    },
    updateStatus(item, status) {
      addOrEditShoeRack({
        ...item,
        status,
      }).then((res) => {
        this.loading = false;
        this.$message.success("操作成功");
        this.getListData(this.queryParams);
      });
    },
    deleteItem(id) {
      deleteShoeRack(id).then((res) => {
        this.$message.success("删除成功");
        this.getListData(this.queryParams);
      });
    },
    create() {
      this.$router.push({ path: "/shoeRack/edit" });
    },
    edit(id) {

      // console.log(id, "zxcasd");
      this.$router.push({ path: `/shoeRack/edit?id=${id}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.config_details{
  //text-align: center;
  position: relative;
  border-radius: 14px;
  height: 90vh;
  overflow: auto;
  //border: #D6FFF1 2px solid;
  //background-color: gray;
  box-shadow: #1f2d3d;

  padding-left: 20px;
  padding-right: 20px;
  //background-color: #00afff;

}

::v-deep .el-collapse-item{

     min-width: 250px;

}

::v-deep .el-pagination{
  white-space: wrap;
}


::v-deep .el-collapse-item__header{
  font-size: 16px !important;

  font-weight: 600;
}

::v-deep .el-collapse-item{
    //padding-top: 40px;

    box-shadow: #1f2d3d;
    //padding-bottom: 40px;
    //background-color: rgba(194,29,255,0.83) !important;
}


.create {
  margin-bottom: 20px;
}

ul li{

  cursor: pointer;
}

// li::before {
//     content: ""; /* 自定义项目符号 */
//     color: black; /* 项目符号颜色 */
//     display: inline-block; /* 使其可以调整大小和位置 */
//     width: 1em; /* 项目符号的宽度 */
//     margin-left: -1.7em; /* 负边距将项目符号拉回文本的左边 */
// }

.box-card{
  // width: 180px
  // height: 320px;
  display: flex;
  flex-direction: column;
//   justify-content: space-around;
//   align-content: space-around;
}

::v-deep .el-card__body {
    min-width: 320px;
    flex-direction: column;
    justify-content: space-around;
    display: flex;
    min-height: 330px;
    /* padding: 15px 20px 20px 20px; */
}

  .row-bg {
  font-size: 15.2px;
  font-weight: 600;
    // padding: 10px 0;
    // background-color: #f9fafc;
  }

  .kongxian{
    padding-top: 20px;
    display: flex;
    // height: 5vh;
    width: 100%;
    align-items: center;
    position: relative;
    justify-content: center;
  }
  .kongxianwenzi{
    position: relative;
    font-size: 20px;
    color: #B0B0B0;
    display: flex;
    justify-content: center;
  }

  // 选中货架样式
  .active{
    background-color: #D6E2FF;
  }
  // 占用需要给定背景色
  .zhanyongColor{

         background-color: #D6FFF1;


  }

</style>
